import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_changdian_football/pages/mine/feedback/feedback_controller.dart';
import 'package:flutter_changdian_football/routers/app_routes.dart';
import 'package:flutter_changdian_football/widget/custom_button.dart';
import 'package:flutter_changdian_football/widget/dialog/club_avatar_dialog.dart';
import 'package:flutter_changdian_football/widget/screenutil/custom_screenutil.dart';
import 'package:get/get.dart';
import 'package:get/route_manager.dart';

/// 意见反馈
class FeedbackPage extends StatelessWidget {
  const FeedbackPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF8FAF9),
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: const Color(0xffF8FAF9),
        elevation: 0,
        title: Text(
          '意见反馈',
          style: TextStyle(fontSize: 16.sp, color: const Color(0xff333333)),
        ),
        iconTheme: const IconThemeData(
          color: Color(0xff333333)
        ),
      ),
      body: GetBuilder<FeedbackController>(
        init: FeedbackController(),
        builder: (feedbackController) {
          return Container(
            padding: EdgeInsets.symmetric(horizontal: 17.w),
            child: Column(
              children: [
                GestureDetector(
                  behavior: HitTestBehavior.translucent,
                  onTap: () {
                    feedbackController.changeFeedBackType();
                  },
                  child: Container(
                    padding: EdgeInsets.symmetric(vertical: 12.w, horizontal: 14.w),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8.r)
                    ),
                    child: Row(
                      children:  [
                        SizedBox(
                          child: Text('反馈类型', style: TextStyle(fontSize: 15.sp, color: const Color(0xff323232), fontWeight: FontWeight.w400),),
                        ),
                
                        const Spacer(),
                
                        SizedBox(
                          child: Text(feedbackController.feedBackType == '' ? '请选择' : feedbackController.feedBackType, style: TextStyle(fontSize: 14.sp, color: const Color(0xff999999), fontWeight: FontWeight.w400),),
                        ),
                
                        SizedBox(width: 4.w,),
                
                        Container(
                          margin: EdgeInsets.only(top: 1.w),
                          width: 10.w,
                          height: 10.w,
                          child: Image.asset('assets/images/icon_arrow_grey_right.png'),
                        )
                      ],
                    ),
                  ),
                ),



                SizedBox(height: 10.w,),


                Container(
                  padding: EdgeInsets.symmetric(vertical: 12.w, horizontal: 14.w),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(8.r)
                  ),
                  child: Column(
                    children: [
                      SizedBox(
                        child: Row(
                          children:  [
                            SizedBox(
                              child: Text('描述', style: TextStyle(fontSize: 15.sp, color: const Color(0xff323232), fontWeight: FontWeight.w400),),
                            ),

                            const Spacer(),

                            SizedBox(
                              child: Text('${feedbackController.inputLength}/255', style: TextStyle(fontSize: 14.sp, color: const Color(0xff999999), fontWeight: FontWeight.w400),),
                            ),

                          ],
                        ),
                      ),

                      SizedBox(height: 12.w,),

                      Container(
                        height: 80.w,
                        width: double.infinity,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(12.r),
                        ),
                        child: Column(
                          children: [
                            Expanded(
                              child: TextField(
                                keyboardType: TextInputType.text,
                                maxLines: 10,
                                maxLength: 255,
                                controller: feedbackController.decorationController,
                                decoration: InputDecoration(
                                  contentPadding: EdgeInsets.zero,
                                  border: const OutlineInputBorder(
                                    borderSide: BorderSide.none,
                                  ),
                                  hintStyle: TextStyle(fontSize: 14.sp, color: const Color(0xff9E9E9E)),
                                  hintText: '请简要描述您的遇到的问题或意见（必填）',
                                  counterText: '',
                                ),
                                style: TextStyle(fontSize: 14.sp, color: const Color(0xff333333)),
                                onChanged: (v) {
                                  feedbackController.inputLength = v.length;
                                  feedbackController.update();
                                },
                              ),
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                ),



                SizedBox(height: 10.w,),


                Container(
                  padding: EdgeInsets.symmetric(vertical: 12.w, horizontal: 14.w),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(8.r)
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(
                        child: Row(
                          children: [
                            SizedBox(
                              child: Text('图片（选填）', style: TextStyle(fontSize: 15.sp, color: const Color(0xff323232), fontWeight: FontWeight.w400),),
                            ),

                            const Spacer(),

                            SizedBox(
                              child: Text('${feedbackController.selectImage.length}/3', style: TextStyle(fontSize: 14.sp, color: const Color(0xff999999), fontWeight: FontWeight.w400),),
                            ),

                          ],
                        ),
                      ),

                      SizedBox(height: 12.w,),

                      SizedBox(
                        height: 76.w,
                        child: ListView.separated(
                          itemCount: feedbackController.selectImage.length >= 3 ? feedbackController.selectImage.length : feedbackController.selectImage.length + 1,
                          shrinkWrap: true,
                          separatorBuilder: (context, index) {
                            return SizedBox(width: 20.w,);
                          },
                          scrollDirection: Axis.horizontal,
                          itemBuilder: (BuildContext context, int index) {
                            if (feedbackController.selectImage.length < 3) {
                              if (feedbackController.selectImage.length == index) {
                                return GestureDetector(
                                  behavior: HitTestBehavior.translucent,
                                  onTap: () {
                                    ClubAvatarDialog.show(
                                      Get.context!,
                                      title: '选择方式',
                                      isRecommend: false,
                                      phoneTap: () {
                                        feedbackController.photoSelectImage();
                                      },
                                      shootTap: () {
                                        feedbackController.shootSelectImage();
                                      }
                                    );
                                  },
                                  child: Container(
                                    width: 76.w,
                                    height: 76.w,
                                    decoration: BoxDecoration(
                                      color: const Color(0xffF8FAF9),
                                      borderRadius: BorderRadius.circular(4.r)
                                    ),
                                    child: const Icon(Icons.add, color: Color(0xff979797),),
                                  ),
                                );
                              }
                            }
                            return Row(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Stack(
                                  clipBehavior: Clip .none,
                                  children: [
                                    ClipRRect(
                                      borderRadius: BorderRadius.circular(4.r),
                                      child: Container(
                                        width: 76.w,
                                        height: 76.w,
                                        decoration: BoxDecoration(
                                          color: const Color(0xffF8FAF9),
                                          borderRadius: BorderRadius.circular(4.r)
                                        ),
                                        child: Image.network(feedbackController.selectImage[index], fit: BoxFit.fill,),
                                      ),
                                    ),

                                    Positioned(
                                      right: -10.w,
                                      top: -10.w,
                                      child: GestureDetector(
                                        behavior: HitTestBehavior.translucent,
                                        onTap: () {
                                          feedbackController.delImage(index);
                                        },
                                        child: Container(
                                          width: 20.w,
                                          height: 20.w,
                                          decoration: BoxDecoration(
                                            color: const Color(0xff333333).withOpacity(0.5),
                                            borderRadius: BorderRadius.circular(20.r)
                                          ),
                                          child: Icon(Icons.close, size: 10.w, color: Colors.white,),
                                        ),
                                      )
                                    )
                                  ],
                                )
                              ],
                            );

                          }
                        ),
                      ),

                    ],
                  ),
                ),


                const Spacer(),

                CustomButton(
                  text: '提交',
                  onTap: () {
                    feedbackController.submit();
                  },
                ),



                SizedBox(height: 20.w,),

                SizedBox(
                  child: RichText(
                    text:  TextSpan(
                      children: [
                        TextSpan(
                          style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.w400, color: const Color(0xff999999)),
                          text: '如遇到紧急问题可'
                        ),
                        TextSpan(
                          style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.w400, color: const Color(0xff36764A)),
                          text: '联系客服',
                          recognizer: TapGestureRecognizer()..onTap = () {
                            FocusScope.of(context).requestFocus(FocusNode());
                            // Get.to(() => const ContactServicePage());
                            Get.toNamed(AppRoutes.contactCustomerService);
                          },
                        ),
                        TextSpan(
                          style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.w400, color: const Color(0xff999999)),
                          text: '快速处理'
                        )
                      ]
                    )
                  ),
                ),

                SizedBox(height: 30.w,),

              ],
            ),
          );
        }
      ),
    );
  }
}